import React, { useState } from 'react'
import { Toast, NavBar, Button, ProductCard, Tag, Popup, Checkbox } from 'react-vant'
import { Search, WeappNav, ClockO, ArrowDown, Phone, Arrow, Cross } from '@react-vant/icons'
import styles from '../Ordercss分支/Pay.module.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import {http} from '../../utils'

export default function OrderPay() {

  const [state, setState] = useState('')
  const [states, setStates] = useState('')
  const navigate = useNavigate()
  const [close,setclose] = useState(true)
  const open = () => {
    setState('bottom')
  }
  const onClose = () => setState('')
  const onCloses = () => setStates('')


  const [loading, setLoading] = useState(false);

  const handlePayment = async () => {
    setLoading(true);
    try {
      // 调用后端接口生成支付参数
      // const response = await  http.get(`/cry/createOrder`);
      const response = await axios.get(`http://localhost:3000/cry/createOrder`);
      const { data } = response;

      // 跳转到支付宝支付页面
      window.location.href = data;
    } catch (error) {
      console.error('支付失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <NavBar
        title='订单详情'
        onClickLeft={() => {Toast('返回'),navigate(-1)}}
        rightText={<WeappNav />}
        onClickRight={() => Toast('按钮')}
        style={{ backgroundColor: '#f5f5f5', color: 'black' }}
      />
      <div className={styles.big}>
        {
          close?
          <div className={styles.top}>
          <span style={{ fontSize: '0.18rem' }}>订单待付款&nbsp;<Arrow /></span>
          <span style={{ fontSize: '0.15rem' }}><span style={{ color: '#ff644d' }}><ClockO />4分钟</span>后订单将自动取消，请及时支付</span>
          <div>
            <Button color='#fe5100' plain style={{ fontSize: '0.1rem' }} size='small' className={styles.top_But} onClick={()=>{setStates('bottom')}}>
              取消订单
            </Button>
            <Button color='linear-gradient(to right, #fe9500, #fe4900)' size='small' className={styles.top_Butt} onClick={() => { open() }}>
              去付款
            </Button>
          </div>
        </div>:
          <div className={styles.top}>
          <span style={{ fontSize: '0.18rem' }}>交易关闭&nbsp;<Arrow /></span>
          <span style={{ fontSize: '0.15rem' }}>期待您的下次光临</span>
          <div>
            <Button color='#fe5100' plain style={{ fontSize: '0.1rem' }} size='small' className={styles.top_But} onClick={()=>{setStates('bottom')}}>
              回到首页
            </Button>
            <Button color='linear-gradient(to right, #fe9500, #fe4900)' size='small' className={styles.top_Butt} onClick={() => { open() }}>
              查看订单
            </Button>
          </div>
        </div>
        }
        <div className={styles.two}>
          <div className={styles.two_top}>
            <img src="../../public/order2.png" alt="" />
            <span><span style={{ fontWeight: 'bold', fontSize: '0.17rem' }}>华莱士-爱情广场店&nbsp;</span>＞</span>
          </div>
          <div className={styles.two_list}>
            <ProductCard
              num="2"
              price="2.00"
              title="香辣鸡块汉堡包"
              thumb="../../public/order3.png"
              style={{ width: '100%', backgroundColor: 'white' }}
            />
          </div>
          <div className={styles.two_count}>
            <div>共6件<ArrowDown /></div>
          </div>
          <div className={styles.two_bot}>
            <Phone />联系商家
          </div>
        </div>
        <div className={styles.three}>
          <div className={styles.three_div}>
            <span style={{ fontSize: '0.16rem' }}>商品总价</span>
            <span style={{ fontWeight: 'bold' }}>￥101</span>
          </div>
          <div className={styles.three_div}>
            <span style={{ fontSize: '0.16rem' }}>商品总价</span>
            <span style={{ fontWeight: 'bold' }}>￥101</span>
          </div>
          <div className={styles.three_div}>
            <span style={{ fontSize: '0.16rem' }}>商品总价</span>
            <span style={{ fontWeight: 'bold' }}>￥101</span>
          </div>
          <div className={styles.three_div}>
            <span style={{ fontSize: '0.16rem' }}>商品总价</span>
            <span style={{ fontWeight: 'bold' }}>￥101</span>
          </div>
          <div className={styles.three_bot}>
            <span style={{ fontSize: '0.14rem' }}>共优惠</span><span style={{ color: '#ff644d' }}>￥10</span>&emsp;<span style={{ fontWeight: 'bold' }}><span style={{ fontSize: '0.15rem' }}>应付款</span><span style={{ fontSize: '0.2rem' }}>￥104</span></span>
          </div>
        </div>
        <div className={styles.four}>
          <div className={styles.four_send}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>配送方式</span>
            <span>平台转送</span>
          </div>
          <div className={styles.four_send}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>预计送达</span>
            <span>12月07日&nbsp;18:10</span>
          </div>
          <div className={styles.four_local}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>收货地址</span>
            <span className={styles.span}>李四收，166****8989，保定市莲池区南二环南大园乡99号幸福小区13栋</span>
          </div>
        </div>
        <div className={styles.four}>
          <div className={styles.four_send}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>餐具数量</span>
            <span>无需餐具</span>
          </div>
          <div className={styles.four_send}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>发票类型</span>
            <span>个人</span>
          </div>
          <div className={styles.four_local}>
            <span style={{ fontSize: '0.16rem', color: '#797979', marginRight: '0.4rem' }}>备注需求</span>
            <span className={styles.span}>多要肌肤手套，聚会客人比较多，谢谢老板，好人一生平安</span>
          </div>
        </div>
      </div>
      <Popup
        visible={state === 'bottom'}
        style={{ height: '58%' }}
        position='bottom'
        onClose={onClose}
      >
        <NavBar
          title={<h5>请在规定时间内支付</h5>}
          leftText={<Cross />}
          onClickLeft={() => { onClose() }}
          style={{ backgroundColor: '#f7f7f7' }}
        />
        <div className={styles.side}>
          <div className={styles.side_top}>
            <span style={{ fontSize: '0.16rem', color: '#797979' }}>李四收&nbsp;136****5678</span>
            <span>保定市莲池区南二环南大园乡99号幸福小区13栋</span>
          </div>
          <div className={styles.side_pay}>
            <span style={{ fontSize: '0.16rem', color: '#797979' }} className={styles.span}>请选择支付方式</span>
            <div>
              <span>支付宝支付</span>
              <Checkbox defaultChecked checkedColor='#ee0a24' />
            </div>
            <div>
              <span>微信支付</span>
              <Checkbox  checkedColor='#ee0a24' />
            </div>
            <div style={{ border: 'none' }}>
              <span>工商银行支付</span>
              <Checkbox  checkedColor='#ee0a24' />
            </div>

          </div>
          <Button color='linear-gradient(to right, #ff9800, #fe4701)' className={styles.side_but} onClick={()=>{handlePayment()}}>
            {loading?'支付中':'继续结算￥104'}
          </Button>
        </div>
      </Popup>
      <Popup
        visible={states === 'bottom'}
        style={{ height: '40%' }}
        position='bottom'
        onClose={onCloses}
      >
        <NavBar
          title={<h5>订单取消</h5>}
          leftText={<Cross />}
          onClickLeft={() => { onClose() }}
          style={{ backgroundColor: '#ffffff' }}
        />
        <div className={styles.dan}>
          <div className={styles.dan_top}>
            取消后无法恢复，优惠卷、红包可退回，请在有效期内使用。
          </div>
          <div className={styles.dan_div} style={{fontSize:'0.15rem',color:'#7d7d7d'}}>
            请选择取消订单原因
          </div>
          <div className={styles.dan_div}>
            <span>点错菜、点多了</span>
            <Checkbox  checkedColor='#ee0a24' />
          </div>
          <div className={styles.dan_div}>
            <span>计划有变，不想要了</span>
            <Checkbox  checkedColor='#ee0a24' />
          </div>
          <div className={styles.dan_div}>
            <span>价格有点贵</span>
            <Checkbox  checkedColor='#ee0a24' />
          </div>
          <div className={styles.dan_div}>
            <span>其他</span>
            <Checkbox checkedColor='#ee0a24' />
          </div>
          <Button color='linear-gradient(to right, #ff9800, #fe4701)' className={styles.side_butt}>
            确定取消
          </Button>
        </div>
      </Popup>
    </div>
  )
}
